<template>
    <div class="homepage">
        <el-main style="width: 100%;">
            <el-row>
                <el-col :span="3" style="width: 100px; height: 50px;"></el-col>
                <el-col :span="21" style="height: 80px;">
                    <div>
                        <h1 style="font-size: 40px;font-family: '隶书';">用户收支信息</h1>
                    </div>
                </el-col>
            </el-row>
            <el-row style="height: 520px;">
                <el-col :span="3" style="width: 50px; height: 50px;"></el-col>
                <el-col :span="9" style="width: 600px;height: 500px;">
                    <div ref="chart1" style="width: 550px; height: 450px;"></div>
                </el-col>
                <el-col :span="9" style="width: 600px;height: 500px;">
                    <div ref="chart2" style="width: 550px; height: 450px;"></div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="3" style="width: 50px; height: 50px;"></el-col>
              <el-col :span="12"><h2>近期交易概览</h2></el-col>
            </el-row>
            <el-row style="height: 400px;">
                <el-col :span="3" style="width: 50px; height: 50px;"></el-col>
                <el-col :span="18" style="height: 400px;">
                    <el-table :data="tableData" border  style="width: 80%;">
                        <el-table-column prop="transactionDate" label="交易日期"></el-table-column>
                        <el-table-column prop="amount" label="金额"></el-table-column>
                        <el-table-column prop="transactionType" label="交易类型"></el-table-column>
                    </el-table>
                </el-col>
            </el-row>
            <el-row></el-row>
        </el-main>
    </div>
</template>


<script>

import axiosInstance from '@/router/axiosInstance';
export default {
    data() {
        return {
            tableData: []
        };
    },
    mounted() {
        this.fetchTransactionData();
        this.initChart1();
        this.initChart2();
    },
    methods: {
        fetchTransactionData() {
            axiosInstance.get('http://localhost:8080/api/account/account_sum/1')
                .then(response => {
                    if (response.status === 200) {
                        this.tableData = response.data; // 确保 response.data 是一个数组
                    } else {
                        console.error('请求失败或返回的数据格式不正确', response);
                    }
                })
                .catch(error => {
                    console.error('请求发生错误', error);
                });
        },
        initChart1() {
            const chart = this.$refs.chart1;
            axiosInstance.post('http://localhost:8080/api/account/sum')
                .then(response => {
                    if (response.status === 200) {
                        const { data } = response.data;
                        if (chart) {
                            const myChart = this.$echarts.init(chart);
                            const dateColumns = data[0].slice(1);
                            const dateColumnsIndices = {};
                            data[0].slice(1).forEach((date, index) => {
                                dateColumnsIndices[date] = index + 1;
                            });

                            const option = {
                                legend: {},
                                tooltip: {
                                    trigger: 'axis',
                                    showContent: false
                                },
                                dataset: {
                                    source: data
                                },
                                xAxis: { type: 'category' },
                                yAxis: { gridIndex: 0 },
                                grid: { top: '55%' },
                                series: [
                                    { type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: { focus: 'series' } },
                                    { type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: { focus: '系列' } },
                                    { type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: { focus: '系列' } },
                                    { type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: { focus: '系列' } },
                                    {
                                        type: 'pie',
                                        id: 'pie',
                                        radius: '30%',
                                        center: ['50%', '25%'],
                                        emphasis: { focus: 'self' },
                                        label: {
                                            formatter: this.getPieLabelFormatter(dateColumns[0])
                                        },
                                        encode: {
                                            itemName: '表名',
                                            value: dateColumns[0],
                                            tooltip: dateColumns[0]
                                        }
                                    }
                                ]
                            };
                            myChart.on('updateAxisPointer', (event) => {
                                const xAxisInfo = event.axesInfo[0];
                                if (xAxisInfo) {
                                    const dimension = data[0][xAxisInfo.value + 1];
                                    const dimensionIndex = dateColumnsIndices[dimension];

                                    myChart.setOption({
                                        series: [{
                                            id: 'pie',
                                            label: {
                                                formatter: this.getPieLabelFormatter(dimension)
                                            },
                                            encode: {
                                                value: dimensionIndex,
                                                tooltip: dimensionIndex
                                            }
                                        }]
                                    });
                                }
                            });
                            myChart.setOption(option);

                            window.addEventListener('resize', () => {
                                myChart.resize();
                            });

                            const resizeCallback = () => {
                                myChart.resize();
                            };
                            this.$once('hook:beforeDestroy', () => {
                                window.removeEventListener('resize', resizeCallback);
                            });
                        }
                    } else {
                        console.error('请求失败或返回的数据格式不正确', response);
                    }
                })
                .catch(error => {
                    console.error('请求发生错误', error);
                });
        },
        getPieLabelFormatter(dimension) {
            return `{b}: {@[${dimension}]} ({d}%)`;
        },
        initChart2() {
            const chart2 = this.$refs.chart2;
            if (chart2) {
                const myChart2 = this.$echarts.init(chart2);

                // 发送请求获取 balance-history 数据
                axiosInstance.get('http://localhost:8080/api/account/1/balance-history')
                    .then(response => {
                        if (response.status === 200) {
                            this.balanceHistory = response.data;
                            const dates = this.balanceHistory[0];
                            const balances = this.balanceHistory[1];

                            const option2 = {
                                xAxis: {
                                    type: 'category',
                                    boundaryGap: false,
                                    data: dates
                                },
                                yAxis: {
                                    type: 'value'
                                },
                                series: [
                                    {
                                        data: balances,
                                        type: 'line',
                                        areaStyle: {}
                                    }
                                ]
                            };

                            myChart2.setOption(option2);
                        } else {
                            console.error('请求失败或返回的数据格式不正确', response);
                        }
                    })
                    .catch(error => {
                        console.error('请求发生错误', error);
                    });
            }
        }
    }
};
</script>

<style scoped>
/* 通用样式 */
.el-main{
    height: 1250px;
}
</style>